<template>
  <div class="search-input">
    <el-input :style="props.Style || defaultStyle" v-model="searchKey" placeholder="搜一搜 发现更多精彩">
      <template #append>
        <el-button @click="searchMatch" :icon="Search" />
      </template>
      ></el-input
    >
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import { Search } from "@element-plus/icons-vue";

const props = defineProps(["Style"]);
const emit = defineEmits(["search"]);
const searchKey = ref();

function searchMatch() {
  emit("search", searchKey.value);
}

const defaultStyle = {
  width: "240px",
  height: "40px",
};
</script>

<style lang="scss" scoped></style>
